iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1
Modern Web

Fabricjs 筆記系列 第 13

Day 13 - 把物件群組起來

  • 分享至 

  • xImage
  •  

前言

今天要來玩玩 Fabricjs 一個很好用的群組功能,能夠把多個物件群組成一個,就像我們常用的那些繪圖軟體有的群組功能一樣,可以把不同的物件群組起來,讓他們可以一起被使用者移動、縮放、刪除。

建立群組

透過滑鼠

其實當我們在產生一張 canvas 後,fabricjs 就能讓我們透過滑鼠拖曳,來達到多選群組的效果了!

透過將多個物件群組起來,讓使用者能夠一次操控多個物件的屬性,如大小以及一起移動、旋轉。

其實 fabricjs 當使用者使用滑鼠將多個物件選取起來時,偷偷的建立了一個暫時 fabric.Group 的物件,並且把你所選取的物件裝起來。

透過 toGroup 做群組

不過這樣當點到別的區域時群組就會消失了,我們試著把物件永久的群組起來。

這邊先將要群組的物件選取,使用 canvas.getActiveObject() 取得所有被選取的物件。

呼叫 toGroup() 將他們群組起來。

function group () {
  canvas.getActiveObject().toGroup()
}

解除群組

使用 toActiveSelection 解除群組。

function ungroup () {
  canvas.getActiveObject().toActiveSelection();
}

透過 new fabric.Group

也可以透過 new fabric.Group 的方式,來將以知物件群組。

const rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  left: 250,
  top: 250
})
const text = new fabric.Text('halo', {
  left: 250,
  top: 250
})
const mix = new fabric.Group([rect, text])
canvas.add(mix)


再來看看我們能透過 fabric.Group 做哪些事情。

fabric.Group

將物件群組起來後,我們就可以輕鬆地控制群組內的所有物件,並且可以簡單快速的新增、刪除群組內的物件,而且可以透過群組的相對位置新增物件。

先主動把之前所建立的所有物件的群組起來,再來做之後的操作。

const dog = new fabric.Group(canvas.getObjects(), {
  top: 30,
  left: 30
})
// 清空原來的
canvas.clear().renderAll()
// 建立我們組合好的 group
canvas.add(dog)

group.getObjects()

可以如同 canvas.getObjects() 一樣,使用 group.getObjects() 來取得群組內的所有物件。

function getDogObjects() {
  return dog.getObjects()
}

group.addWithUpdate()

在群組中加入新物件,並且透過群組的相對位置來新增。

直接使用 group.add() 也能把物件加入群組中,不過是依照整個 canvas 的定位去新增。

const tail = dog.addWithUpdate(new fabric.Rect({
  width: 20,
  height: 5,
  top: dog.top + 50,
  left: dog.left - 10,
  fill: '#DDAA00'
}))

group.item()

可使用 group.item() 來取得群組中的物件,就像是 canvas.item() 那樣。

group.remove()

移除群組裡面的物件。

dog.remove(dog.item(0))

group.type

fabricjs 的物件都有自己的 type,可以透過 group.type 發現自己的型態。

console.log(dog.type) // group

今日小結


上一篇
Day 12 -利用序列化與反序列化來實作存檔功能及還原功能
下一篇
Day 14 - Fabricjs 製作子類別
系列文
Fabricjs 筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言